<template>

  <!-- 选择合同清单 -->
  <el-dialog title="选择缺陷责任期清单" :visible.sync="visible" :close-on-click-modal="false" width="1200px" top="5vh" append-to-body>

    <el-form :model="queryParams" ref="queryForm" :inline="true">

    </el-form>

    <el-row>
      <el-table @row-click="clickRow" ref="table" :data="list" @selection-change="handleSelectionChange" height="550px">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="清单编码" align="left" prop="boqCode" width="80" :show-overflow-tooltip="true" />
        <el-table-column label="清单名称" align="left" prop="boqName" :show-overflow-tooltip="true" />
        <el-table-column label="单位" align="center" prop="unit" />
        <el-table-column label="单价" align="center" prop="price" />
        <el-table-column label="折旧费" align="center" prop="depreciationTotal" />
        <el-table-column label="合同数量" align="center" prop="personAmount" />
        <el-table-column label="合同总期数" align="center" prop="periodAmount" />
        <el-table-column label="已计量期数" align="center" prop="alreadyAmount" />
        <el-table-column label="剩余期数" align="center" prop="remainderAmount" />
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSelectMeterage">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>

  </el-dialog>

</template>
<script>

  import { selectDefectList, saveDetailDefect } from "@/api/supervisor/meterageDetail";

  export default {
    props: {
      // 主表ID
      masterId: {
        type: [Number, String]
      }
    },
    data() {
      return {
        // 遮罩层
        visible: false,
        // 选中数组值
        ids: [],
        // 总条数
        total: 0,
        // 列表
        list: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          masterId: undefined
        }
      }
    },
    methods: {
      // 显示弹框
      show() {
        this.queryParams.masterId = this.masterId;
        this.getList();
        this.visible = true;
      },
      clickRow(row) {
        this.$refs.table.toggleRowSelection(row);
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.id = selection.map(item => item.id);
      },
      // 查询表格数据
      getList() {
        selectDefectList(this.queryParams).then(res => {
          this.list = res.rows;
          this.total = res.total;
        });
      },
      /** 选择清单操作 */
      handleSelectMeterage() {
        const masterId = this.queryParams.masterId;
        const ids = this.id.join(",");
        saveDetailDefect({ masterId: masterId, ids: ids }).then(res => {
          this.$modal.msgSuccess(res.msg);
          if (res.code === 200) {
            this.visible = false;
            this.$emit("ok");
          }
        });
      }
    }
  }
</script>
